<template>
  <div class="communication">
    <div class="am-u-sm-12 am-u-md-12 am-u-lg-12">
      <div class="widget am-cf">
        <div class="widget-body am-fr">
          <div class="communication-head">
            <span class="items">当天预约联系人数：<em>{{ todayCommunicateNum }}</em> ；</span>
            <span class="items">重点关注人数：<em>{{ focusOnCommunicateNum }}</em> ；</span>
          </div>
          <div class="am-u-md-12 one-line">
            <el-select
              size="small"
              class="am-u-sm-12 am-u-md-12 am-u-lg-3"
              v-model="query.areaTeamId"
              placeholder="请选择区域"
            >
              <el-option
                v-for="item in areaTeams"
                :key="item.areaTeamId"
                :label="item.name"
                :value="item.areaTeamId"
              >
              </el-option>
            </el-select>

            <el-select
              size="small"
              class="am-u-sm-12 am-u-md-12 am-u-lg-3 am-form-group"
              multiple
              :disabled="busTeams.length === 0"
              @change="askForCommunicateNum"
              v-model="query.busTeamIds"
              placeholder="请选择业务组"
            >
              <el-option
                v-for="item in busTeams"
                :key="item.busTeamId"
                :label="item.name"
                :value="item.busTeamId"
              >
              </el-option>
            </el-select>
            <el-select
              :disabled="periods.length === 0"
              size="small"
              @change="askForCommunicateNum"
              class="am-u-sm-12 am-u-md-12 am-u-lg-3 am-form-group"
              multiple
              v-model="query.periodIds"
              placeholder="请选择期数"
            >
              <el-option
                v-for="item in periods"
                :key="item.periodId"
                :label="item.periodName"
                :value="item.periodId"
              >
              </el-option>
            </el-select>
            <el-select
              size="small"
              clearable
              class="am-u-sm-12 am-u-md-12 am-u-lg-3 am-form-group"
              v-model="query.segmentNo"
              placeholder="段次"
            >
              <el-option
                v-for="item in segmentNos"
                :key="item.value"
                :label="item.name"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </div>
          <div class="am-u-md-12 one-line">
            <el-select
              clearable
              class="am-u-sm-12 am-u-md-12 am-u-lg-3 am-form-group"
              v-model="query.gradeId"
              placeholder="请选择年级"
            >
              <el-option
                label="请选择年级"
                value=""
              >
              </el-option>
              <el-option
                v-for="item in grades"
                :key="item.gradeId"
                :label="item.gradeName"
                :value="item.gradeId"
              >
              </el-option>
            </el-select>
            <el-select
              size="small"
              clearable
              class="am-u-sm-12 am-u-md-12 am-u-lg-3 am-form-group"
              v-model="query.communicateState"
              placeholder="沟通状态"
            >
              <el-option
                v-for="item in communicateState"
                :key="item.value"
                :label="item.name"
                :value="item.value"
              >
              </el-option>
            </el-select>
            <el-select
              size="small"
              clearable
              class="am-u-sm-12 am-u-md-12 am-u-lg-3 am-form-group"
              v-model="query.nextCommunicateDate"
              placeholder="当天约定联系"
            >
              <el-option
                v-for="item in nextCommunicateDate"
                :key="item.value"
                :label="item.name"
                :value="item.value"
              >
              </el-option>
            </el-select>
            <div class="am-u-sm-12 am-u-md-12 am-u-lg-3 am-form">
              <div class="am-form-group">
                <input
                  type="text"
                  v-model="query.communicateNum"
                  placeholder="沟通次数"
                />
              </div>
            </div>

          </div>
          <div class="am-u-md-12 one-line">
            <div class="am-u-sm-12 am-u-md-12 am-u-lg-3 am-form">
              <div class="am-form-group">
                <input
                  type="text"
                  v-model="query.studentName"
                  placeholder="学生姓名"
                />
              </div>
            </div>
            <div class="am-u-sm-12 am-u-md-12 am-u-lg-3 am-form">
              <div class="am-form-group">
                <input
                  type="text"
                  v-model="query.studentPhoneNo"
                  placeholder="学生电话"
                />
              </div>
            </div>
            <el-checkbox
              class="am-u-sm-12 am-u-md-12 am-u-lg-3 am-form-group"
              v-model="query.focusOn"
              style="width:100px"
            >重点关注</el-checkbox>
            <div class="am-u-sm-12 am-u-md-12 am-u-lg-3 am-form-group am-u-end">
              <button
                @click="search"
                type="button"
                class="btn-search am-btn am-btn-default am-btn-success"
              >
                <span class="am-icon-search"></span>查询
              </button>
              <button
                @click="handleExport"
                type="button"
                class="btn-search am-btn am-btn-default am-btn-success"
              >
                <span class="am-icon-search"></span>导出
              </button>
               <button
                @click="demoDownload"
                type="button"
                class="btn-search am-btn am-btn-default am-btn-success"
              >
                数据下载
              </button>
              <upload btnText ="批量导入"
              uploadType ="file"
              :acceptType ="['xls', 'xlsx']"
              uploadField ="file"
              :apiUrl ="importUrl"
              ></upload>
            </div>
          </div>
          <div class="am-u-sm-12">
            <el-table
              :data="tableData"
              border
              stripe
              :empty-text="tableNoDataTips"
              style="min-width: 100%"
            >
              <el-table-column
                prop="studentName"
                label="学生姓名"
                fixed
                min-width="100"
              >
              </el-table-column>
              <el-table-column
                label="学生电话"
                fixed
                prop="studentPhoneNo"
                min-width="100"
              >
              </el-table-column>
              <el-table-column
                align="center"
                label="是否已沟通"
                prop="communicateState"
                min-width="110"
              >
                 <template scope="scope">
                  {{scope.row.communicateState == 1 ? '是' : '否' }}
                </template>
              </el-table-column>
              <el-table-column
                align="center"
                label="沟通次数"
                prop="communicateNum"
                min-width="100"
              >
              </el-table-column>
              <el-table-column
                align="center"
                label="生源类型"
                prop="studentState"
                width="150"
              >
                <template scope="scope">
                  <span v-if="scope.row">{{scope.row.studentState==0?'新生':scope.row.studentState==1?'老生':scope.row.studentState==2?'续读生':''}}</span>
                </template>
              </el-table-column>
              <el-table-column
                label="报读期数"
                prop="periodName"
                min-width="100"
              >
              </el-table-column>
              <el-table-column
                align="center"
                label="报读业务组"
                prop="busTeamName"
                min-width="110"
              >
              </el-table-column>
              <el-table-column
                align="center"
                label="班主任"
                prop="seniorName"
                min-width="100"
              >
              </el-table-column>
              <el-table-column
                align="center"
                label="段次"
                prop="segmentNo"
                min-width="100"
              >
              </el-table-column>
              <el-table-column
                align="center"
                label="报读年级"
                prop="gradeName"
                min-width="100"
              >
              </el-table-column>
              <el-table-column
                align="center"
                label="就读学校"
                prop="school"
                min-width="100"
              >
              </el-table-column>
              <el-table-column
                align="center"
                label="最近沟通时间"
                min-width="130"
              >
                <template scope="scope">
                  {{scope.row.communicateDate | formatDate }}
                </template>
              </el-table-column>
              <el-table-column
                align="center"
                label="学号"
                prop="studentNo"
                width="150"
              >
              </el-table-column>
              <el-table-column
                align="center"
                label="操作"
                fixed="right"
                width="220"
              >
                <template scope="scope">
                  <el-button
                    size="small"
                    @click.native="$router.push({path: '/main/school/communication/reg',query:{studentCommunicateId: scope.row.studentCommunicateId,studentId: scope.row.studentId }})"
                  >沟通登记</el-button>
                  <el-button
                    size="small"
                    @click.native="toStudentInfo(scope.row)"
                  >更多数据分析</el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>

          <div class="am-u-lg-12 am-cf">
            <div class="am-fr">
              <pagination
                v-bind:total="total"
                v-bind:pageNo="pageNo"
                v-bind:pageSize="pageSize"
                @paging="handleSearch"
              />
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import io from "../../lib/io";
import moment from "moment";
import Pagination from "../base/Pagination";
import upload from "../base/upload";
export default {
  data() {
    return {
      tableNoDataTips: "暂无数据",
      tableData: [],
      query: {
        areaTeamId:
          (window.config.areaTeams[0] &&
            window.config.areaTeams[0].areaTeamId) ||
          "",
        busTeamIds: [],
        gradeId: "",
        segmentNo: "",
        periodIds: [],
        communicateState: "",
        nextCommunicateDate: "",
        communicateNum: "",
        studentName: "",
        studentPhoneNo: "",
        focusOn: ""
      },
      total: 0,
      pageNo: 1,
      pageSize: 10,
      periods: [],
      segmentNos: [
        {
          value: "1",
          name: "段次1"
        },
        {
          value: "2",
          name: "段次2"
        },
        {
          value: "3",
          name: "段次3"
        },
        {
          value: "4",
          name: "段次4"
        },
        {
          value: "5",
          name: "段次5"
        },
        {
          value: "6",
          name: "段次6"
        },
        {
          value: "7",
          name: "段次7"
        },
        {
          value: "8",
          name: "段次8"
        }
      ],
      communicateState: [
        {
          name: "已沟通",
          value: 1
        },
        {
          name: "未沟通",
          value: 0
        }
      ],
      nextCommunicateDate: [
        {
          name: "是",
          value: moment().format("YYYY-MM-DD")
        },
        {
          name: "否",
          value: " "
        }
      ],
      todayCommunicateNum: "",
      focusOnCommunicateNum: "",
      importUrl: io.importStudentCommunicate
    };
  },
  components: {
    Pagination,
    upload
  },
  methods: {
    // 数据模版下载
    demoDownload () {
      let formData = this.getFormDate();
      io.downloadFile(io.exportStudentCommunicate, formData);
    },
    loadPeriodData(resolve) {
      io.post(
        io.apiAdminPeriodListForAreaTeam,
        {
          areaTeamId: this.query.areaTeamId
        },
        ret => {
          if (ret.success) {
            this.periods = ret.data;
            let curPeriodId = ret.data.filter(item => item.isCurrent == 1)[0]
              ? ret.data.filter(item => item.isCurrent == 1)[0].periodId
              : "";
            if (curPeriodId != "") {
              this.query.periodIds = [curPeriodId];
            }
          } else {
            this.$alert(ret.desc);
          }

          if (resolve) {
            resolve("success");
          }
        }
      );
    },
    toStudentInfo(student) {
      let param = {
        studentName: student.studentName,
        phone: student.studentPhoneNo
      };
      var w = window.open("_blank"); //防止浏览器拦截，先打开空页面在重定向
      io.post(io.apiFindMoreStudentInfo, param, ret => {
        if (ret.success) {
          w.location = ret.data; //重定向

          // 模拟a链接处理拦截暂无效果
          // var a = document.createElement('a');
          // a.setAttribute('href', ret.data);
          // a.setAttribute('target', '_blank');
          // a.setAttribute('id', ret.data);
          // // 防止反复添加
          // if(!document.getElementById(ret.data)) {
          //     document.body.appendChild(a);
          // }
          // a.click();
        } else {
          this.$alert(ret.desc);
        }
      });
    },
    search() {
      this.pageNo = 1;
      this.handleSearch();
    },
    handleSearch(pageNo) {
      let formData = this.getFormDate(pageNo);
      io.post(io.studentCommunicatePage, formData, ret => {
        if (ret.success) {
          ret.data.list.map(item => {
            this.grades.map(ite => {
              if (item.gradeId == ite.gradeId) {
                item.gradeName = ite.gradeName;
              }
            });
          });
          this.tableData = ret.data.list;
          this.total = ret.data.total;
        }
      });
    },
    getFormDate(pageNo) {
      this.pageNo = pageNo || this.pageNo || 1;
      let formData = {};
      for (var key in this.query) {
        if (Array.isArray(this.query[key])) {
          formData[key] = this.query[key].join(",");
        } else if (typeof this.query[key] === "boolean") {
          if (this.query[key]) {
            formData[key] = 1;
          }
        } else {
          if ((this.query[key] + "").trim() !== "") {
            formData[key] = this.query[key];
          }
        }
      }
      formData.pageNo = this.pageNo;
      formData.pageSize = this.pageSize;
      return formData;
    },
    handleExport() {
      let formData = this.getFormDate();
      io.downloadFile(io.exportSeniorCommunicate, formData);
    },
    communicateReg(id) {},
    // 预约人数，重点人数
    askForCommunicateNum() {
      io.post(
        io.countCommunicateNum,
        {
          busTeamIds: this.query.busTeamIds.join(","),
          periodIds: this.query.periodIds.join(",")
        },
        ret => {
          if (ret.success) {
            this.todayCommunicateNum = ret.data.todayCommunicateNum;
            this.focusOnCommunicateNum = ret.data.focusOnCommunicateNum;
          }
        }
      );
    }
  },
  computed: {
    areaTeams() {
      return this.$root.config.areaTeams || [];
    },
    busTeams() {
      let busTeams = this.query.areaTeamId
        ? this.$root.config.groupBusTeams[this.query.areaTeamId] || []
        : [];
      if (busTeams.length) {
        // this.query.busTeamIds = [busTeams[0].busTeamId]
      }
      return busTeams;
    },
    grades: function() {
      return this.$root.config.grades || [];
    }
  },
  created() {
    let promise = new Promise((resolve, reject) => {
      this.loadPeriodData(resolve);
    });
    promise.then(
      value => {
        // success
        this.handleSearch();
      },
      error => {
        // failure
      }
    );
  }
};
</script>
<style lang="less">
.communication {
  [class*="am-u-"] {
    padding-left: 0;
    padding-right: 0;
    margin-left: 0.6%;
    margin-right: 0.6%;
  }
  .one-line {
    margin-left: 0;
    margin-right: 0;
  }
  .am-u-lg-3 {
    width: 23.8%;
  }
}
.communication-head {
  padding-bottom: 30px;
  padding-left: 10px;
  color: #333;
  em {
    font-style: normal;
    color: red;
  }
}
</style>
